<template>
  <div class="account-wrap">
    <NavBar :index="'3'"/>
    <div class="panel-wrap regist-panel">
    	<a class="to-login" href="/home">
    		{{ $root.lang.regist.login }} <i class="fa fa-angle-double-right" aria-hidden="true"></i>
    	</a>
      <p class="regist-title">{{ $root.lang.regist.title }}</p>
      <el-form>
        <el-form-item>
          <el-radio-group v-model="accountType" @change="accountTypeChange">
            <el-radio :label="item.value" :key="index" :value="item.value" v-for="(item, index) in baseState.accountType" >{{ item.title}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      
      <el-form class="regist-form" ref="formPersonal" :model="formPersonal" :rules="formRulesPersonal" label-width="0px" v-show="isPersonal">
			  <el-form-item prop="nickName">
			    <el-input type="text" v-model="formPersonal.nickName" :placeholder="$root.lang.regist.nickName"></el-input>
			    <p class="form-item-tip">{{ $root.lang.regist.nickNameTip }}</p>
			  </el-form-item>
        <el-form-item prop="phoneNum">
			    <el-input type="text" v-model="formPersonal.phoneNum" :placeholder="$root.lang.regist.phoneNum"></el-input>
			    <p class="form-item-tip">{{ $root.lang.regist.phoneNumTip }}</p>
			  </el-form-item>
        <el-form-item prop="captcha" class="form-captcha" align="left">
          <el-input type="text" v-model="formPersonal.captcha" @keyup.enter.native="ableSendCodeBtn()" @blur.native.capture="ableSendCodeBtn()" :placeholder="$root.lang.regist.captcha"></el-input>
          <img class="pull-right" ref="captcha" @click="getCaptchaCode()" :src="captcha.img" :title="$root.lang.regist.captchaTip"/>
          <p class="form-error">{{ captchaErrmsg }}</p>
        </el-form-item>
        <el-form-item prop="verificationCode" class="form-captcha" align="left">
			    <el-input type="text" v-model="formPersonal.verificationCode" :placeholder="$root.lang.regist.verificationCode"></el-input>
          <el-button type="primary" :disabled="disabledBtn" @click="sendCode()">{{ btnName }}</el-button>
			  </el-form-item>
			  <el-form-item class="no-bottom" prop="password">
			    <el-input type="password" v-model="formPersonal.password" :placeholder="$root.lang.regist.password" auto-complete="new-password"></el-input>
			    <p class="form-item-tip">{{ $root.lang.regist.passwordTip }}</p>
			  </el-form-item>
			  <el-form-item class="no-bottom" prop="confirm">
			    <el-input type="password" v-model="formPersonal.confirm" @keyup.enter.native="onSubmit" :placeholder="$root.lang.regist.confirm"></el-input>
			  </el-form-item>
			  <el-form-item>
          <p class="form-error">{{ errmsg }}</p>
			    <el-button class="regist-btn" type="primary" @click="onSubmit" :loading="loading" :disabled="agreed">{{ $root.lang.regist.btn }}</el-button>
			  </el-form-item>
			</el-form>

      <el-form class="regist-form" ref="formEnterprise" :model="formEnterprise" :rules="formRulesEnterprise" label-width="0px" v-show="!isPersonal">
			  <el-form-item prop="nickName">
			    <el-input type="text" v-model="formEnterprise.nickName" :placeholder="$root.lang.regist.nickName"></el-input>
			    <p class="form-item-tip">{{ $root.lang.regist.nickNameTip }}</p>
			  </el-form-item>
        <el-form-item prop="enterpriseName">
			    <el-input type="text" v-model="formEnterprise.enterpriseName" :placeholder="$root.lang.regist.enterpriseName"></el-input>
			    <p class="form-item-tip">{{ $root.lang.regist.enterpriseNameTip }}</p>
			  </el-form-item>
        <el-form-item prop="businessLicense">
			    <el-input type="text" v-model="formEnterprise.businessLicense" :placeholder="$root.lang.regist.businessLicense"></el-input>
			    <p class="form-item-tip">{{ $root.lang.regist.businessLicenseTip }}</p>
			  </el-form-item>
        <el-form-item prop="enterpriseMailbox">
			    <el-input type="text" v-model="formEnterprise.enterpriseMailbox" :placeholder="$root.lang.regist.enterpriseMailbox"></el-input>
			    <p class="form-item-tip">{{ $root.lang.regist.enterpriseMailboxTip }}</p>
			  </el-form-item>
        <el-form-item prop="contactTelephone">
			    <el-input type="text" v-model="formEnterprise.contactTelephone" :placeholder="$root.lang.regist.contactTelephone"></el-input>
			    <p class="form-item-tip">{{ $root.lang.regist.contactTelephoneTip }}</p>
			  </el-form-item>
			  <el-form-item class="no-bottom" prop="password">
			    <el-input type="password" v-model="formEnterprise.password" :placeholder="$root.lang.regist.password" auto-complete="new-password"></el-input>
			    <p class="form-item-tip">{{ $root.lang.regist.passwordTip }}</p>
			  </el-form-item>
			  <el-form-item class="no-bottom" prop="confirm">
			    <el-input type="password" v-model="formEnterprise.confirm" @keyup.enter.native="onSubmit" :placeholder="$root.lang.regist.confirm"></el-input>
			  </el-form-item>
			  <el-form-item>
          <p class="form-error">{{ errmsg }}</p>
			    <el-button class="regist-btn" type="primary" @click="onSubmit" :loading="loading" :disabled="agreed">{{ $root.lang.regist.btn }}</el-button>
			  </el-form-item>
			</el-form>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/public/NavBar'
import Footer from '@/components/public/Footer'
import { checkPwd, checkPhone, checkEmail } from '@/utils/validate';
import '@/options/baseState'
export default {
  name: 'AccountRegist',
  components: {
    NavBar, Footer
  },
  data() {
  	var checkMail = (rule, value, callback) => {
      if(!value) {
        callback(new Error(this.$root.lang.regist.registRule.emailEmpty))
      } else if(!checkEmail(value)) {
        callback(new Error(this.$root.lang.regist.registRule.emailError))
      } else {
        callback()
      }
    }
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$root.lang.regist.registRule.passwordEmpty))
      } else if(!checkPwd(value)) {
        callback(new Error(this.$root.lang.regist.registRule.passwordError))
      } else {
        callback()
      }
    }
    var checkConfirm = (rule, value, callback) => {
      var paasword = ''
      if(this.accountType == 1) {
        paasword = this.formPersonal.password
      } else {
        paasword = this.formEnterprise.password
      }
      if(!value) {
        callback(new Error(this.$root.lang.regist.registRule.confirmEmpty))
      } else if(value != paasword) {
        callback(new Error(this.$root.lang.regist.registRule.confirmError))
      } else {
        callback()
      }
    }
    var checkPhoneNum = (rule, value, callback) => {
      if(!value) {
        callback(new Error(this.$root.lang.regist.registRule.phoneNumEmpty))
      } else if(!checkPhone(value)) {
        callback(new Error(this.$root.lang.regist.registRule.phoneNumEmptyError))
      } else {
        callback()
      }   
    }
    return {
      accountType: 1,
      formPersonal: {
        accountType: '',
        nickName: '',
        password: '',
        confirm: '',
        verificationCode: '',
        phoneNum: '',
        captcha: '',
      },
      formRulesPersonal: {
      	nickName: [
      		{ required: true, message: this.$root.lang.regist.registRule.nickNameEmpty, trigger: 'blur' },
      		{ min: 5, max: 25, message: this.$root.lang.regist.registRule.nickNameError, trigger: 'blur' }
      	],
        phoneNum: [{ required: true, validator: checkPhoneNum, trigger: 'blur' }],
        captcha: [{ required: true, message: this.$root.lang.regist.registRule.captchaEmpty, trigger: 'blur' }],
        verificationCode: [{ required: true, message: this.$root.lang.regist.registRule.verificationCodeEmpty, trigger: 'blur' }],
        password: [{ required: true, validator: checkPassword, trigger: 'blur' }],
        confirm: [{ required: true, validator: checkConfirm, trigger: 'blur' }]
      },
      formEnterprise: {
        accountType: '',
        nickName: '',
        enterpriseName: '',
        businessLicense: '',
        enterpriseMailbox: '',
        contactTelephone: '',
        password: '',
        confirm: '',
      },
      formRulesEnterprise: {
      	nickName: [
      		{ required: true, message: this.$root.lang.regist.registRule.nickNameEmpty, trigger: 'blur' },
      		{ min: 5, max: 25, message: this.$root.lang.regist.registRule.nickNameError, trigger: 'blur' }
      	],
        enterpriseName: [{ required: true, message: this.$root.lang.regist.registRule.enterpriseNameEmpty, trigger: 'blur' }],
        businessLicense: [{ required: true, message: this.$root.lang.regist.registRule.businessLicenseEmpty, trigger: 'blur' }],
        enterpriseMailbox: [{ required: true, validator: checkMail, trigger: 'blur' }],
        contactTelephone: [{ required: true, validator: checkPhoneNum, trigger: 'blur' }],
        password: [{ required: true, validator: checkPassword, trigger: 'blur' }],
        confirm: [{ required: true, validator: checkConfirm, trigger: 'blur' }]
      },
      agreed: false,
      errmsg: '',
      captchaErrmsg: '',
      loading: false,
      isPersonal: true,
      disabledBtn: true,
      captcha: {
        img: '',
        uuid: '',
      },
      btnName: this.$root.lang.regist.verificationCodeBtn,
      timer: null,
      count: '',
      baseState: {},
    }
  },
  created() {
    this.checkLang()
  	this.getCaptchaCode()
  },
  methods: {
  	onSubmit() {
      this.errmsg = ''
      var form
      if(this.accountType == 1) {
        form = this.$refs.formPersonal
      } else {
        form = this.$refs.formEnterprise
      }
      form.validate(valid => {
        if (valid) {
          this.doRegist()
        } else {
          return false
        }
      })
  	},
    doRegist() {
      this.loading = true
      var form
      if(this.accountType == 1) {
        form = this.formPersonal
      } else {
        form = this.formEnterprise
      }
      let formData = JSON.parse(JSON.stringify(form))
      formData.accountType = this.accountType
      delete formData['confirm']
      this.request({
        url: '/system/register',
        method: 'post',
        data: formData
      }).then(response => {
        this.loading = false
        window.location.href = '/home'
      }).catch(error => {
        this.loading = false
        this.errmsg = error.errmsg
      })
    },
    accountTypeChange() {
      if(this.accountType == 1) {
        this.isPersonal = true
      } else {
        this.isPersonal = false
      }
    },
    getCaptchaCode() {
      this.request({
        url: '/code',
        method: 'get',
      }).then(response => {
          var result = response.result
          this.captcha.img = 'data:image/jpeg;base64,' + result.img
          this.captcha.uuid = result.uuid
      }).catch(error => {
      })
    },
    ableSendCodeBtn() {
      this.captchaErrmsg = ''
      if(this.formPersonal.captcha == '') {
        this.disabledBtn = true
      } else {
        this.disabledBtn = false
      }
    },
    sendCode() {
      this.disabledBtn = true
      this.captchaErrmsg = ''
      let form = {
        phoneNum: this.formPersonal.phoneNum,
        uuid: this.captcha.uuid,
        code: this.formPersonal.captcha
      }
      let formData = JSON.parse(JSON.stringify(form))
      this.request({
        url: '/system/register/sendcode',
        method: 'post',
        data: formData
      }).then(response => {
        this.disabledBtn = true
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.btnName = this.count + 's后重新获取'
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
              this.btnName = this.count + 's后重新获取'
            } else {
              this.btnName = this.$root.lang.regist.verificationCodeBtn
              this.disabledBtn = false
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      }).catch(error => {
        this.disabledBtn = false
        this.captchaErrmsg = error.errmsg
        this.getCaptchaCode()
      })
    },
    checkLang() {
      let langType = this.$root.getStorage('lang')
      if(langType == 'en') {
        this.baseState = enBaseState
      } else {
        this.baseState = baseState
      }
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/css/style.scss';
.account-wrap {
  background-color: #F5F5F6;
	padding-bottom: 30px;
}
.regist-panel {
	position: relative;
	margin: 30px auto 0;
	padding: 30px 50px;
	width: 600px;
	background-color: #ffffff;
	.to-login {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 12px;
		color: $color-blue;
		text-decoration: none;
	}
	.regist-title {
		margin-bottom: 30px;
		font-size: 18px;
	}
	.regist-form {
		margin: 0 auto;
		width: 60%;
	}
	.el-form-item {
		margin-bottom: 20px;
	}
	.regist-btn {
		width: 100%;
	}
	.agreement {
		font-size: 12px;
    * {
      vertical-align: middle!important;
    }
		a {
			color: $color-blue;
			text-decoration: none;
		}
	}
  .form-captcha {
    .el-input{
      display: inline-block;
      width: 60%;
    }
    img {
      height: 40px;
      border-radius: 4px;
      cursor: pointer;
    }
  }
  .form-error {
		text-align: left;
		font-size: 12px;
		color: #F56C6C;
	}
}
</style>